<template>
  <div class="app-container  bg-gray">
    <el-card class="box-1">
      <div class="header">
        <div>
          <el-select v-model="searchTerms.status" placeholder="正常 | 禁用" class="select" clearable @change="getData">
            <el-option label="正常" value="1"/>
            <el-option label="禁用" value="0"/>
          </el-select>
          <el-input v-model="searchTerms.searchText" placeholder="请输入内容" class="search-input" @change="getData"/>
          <el-button type="success" class="do-btn" icon="el-icon-search" @click="getData">搜索</el-button>
        </div>
        <div>
          <el-button type="success" class="bg-green" icon="el-icon-circle-plus" @click="toAdd('新增UP主')">新增UP主
          </el-button>
        </div>
      </div>
      <el-table v-loading="tableLoading" :data="tableData" :max-height="tableMaxHeight" border highlight-current-row
                @sort-change="handleSortChange">
        <el-table-column label="头像" width="100" header-align="center" align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.avatarUrl" style="width: 60px;height: 60px;border-radius: 60px"/>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" min-width="90" header-align="center" align="center"/>
        <el-table-column prop="mobile" label="管理员" min-width="120" header-align="center" align="center">
          <template slot-scope="scope">
            <el-tag v-for="(item, index) in scope.row.managerList" :key="index">{{ item }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="fanNumber" label="粉丝数" min-width="100" header-align="center" align="center" sortable/>
        <el-table-column prop="videoCount" label="视频数" min-width="100" header-align="center" align="center" sortable/>
        <el-table-column prop="registerTime" label="添加时间" min-width="120" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row.registerTime?parseTime(scope.row.registerTime, '{y}-{m}-{d}'):'--' }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" min-width="100" header-align="center" align="center">
          <template slot-scope="scope">
            <div @click="toChangeStatus(scope.row)">
              <el-tag v-if="scope.row.status===1" type="success">正常</el-tag>
              <el-tag v-else type="danage">已禁用</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="success" size="mini" class="bg-green" @click="toModify('编辑信息', scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="toDelete(scope.row)">删除</el-button>
            <!--<el-button v-if="!scope.row.userId" type="primary" size="mini" @click="getQrCode(scope.row)">绑定微信</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        class="pagination"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"/>
    </el-card>
    <!--<el-dialog :visible.sync="qrCodeDialogVisible" title="扫码绑定微信" width="460px" center @close="doClearTimer">
      <el-image :src="qrCodeData['url']"/>
    </el-dialog>-->
  </div>
</template>

<script>
  import { handleSortChange, handleSizeChange, handleCurrentChange, parseTime } from '../../../../utils/table'

  export default {
    data() {
      return {
        searchTerms: {
          page: 0,
          pageSize: 20,
          searchText: ''
        },

        companyList: [],

        // 表格相关数据
        tableMaxHeight: document.documentElement.clientHeight - 320,
        multipleSelection: [],
        tableLoading: false,
        currentPage: 1,
        pageSize: this.$store.getters.userInfo.pageSize,
        pageSizes: [10, 20, 50, 100, 1000],
        total: 0,
        tableData: []
      }
    },
    created() {
      this.getData()
    },
    methods: {
      handleCurrentChange, handleSizeChange, handleSortChange, parseTime,
      getData(order) {
        this.tableLoading = true
        order || (order = {})
        const url = '../videoAdmin/broadcaster/getList'
        const data = {
          page: this.currentPage,
          pageSize: this.pageSize,
          searchText: this.searchTerms.searchValue
        }
        order.sortName && (data.sortName = order.sortName)
        order.sortOrder && (data.sortOrder = order.sortOrder)
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.tableData = res.data.list
          this.total = res.data.count
          this.tableLoading = false
        }).catch(e => {
          this.tableLoading = false
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },
      toDelete(row) {
        this.$confirm('此操作将删除该Up主, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const url = '../videoAdmin/broadcaster/delete'
          const data = { id: row.id }
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg)
            this.getData()
          }).catch(e => {
            this.$message.error('删除失败,请刷新或联系管理员!')
          })
        })
      },
      toAdd(title) {
        const query = { title: title }
        this.$router.push({
          path: '/videoBlogger/bloggerAdd',
          query: query
        })
      },
      toModify(title, row) {
        const query = { title: title }
        row && (query.id = row.id)
        this.$router.push({
          path: '/videoBlogger/bloggerEdit',
          query: query
        })
      },
      toChangeStatus({ id, status }) {
        const url = '../videoAdmin/broadcaster/updateStatus'
        const data = {
          id: id,
          status: (status === 1 ? 2 : 1)
        }
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.$message.success(res.msg)
          this.getData()
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../../styles/index.scss';

  .box-1 {
    .header {
      @include flex-row(center, space-between);
      padding: 10px 0;

      div {
        @include flex-row(center, flex-start);
        flex-wrap: wrap;
      }

      .el-select {
        padding-right: 15px;
        width: 180px;
      }

      .search-input {
        width: 240px;
      }

      .do-btn {
        @extend .bg-green;
        margin-left: 6px;
      }
    }
  }

  .dialog {
    .content {
      text-align: center
    }
  }

  .el-tag {
    cursor: pointer;
  }
</style>
